<template>
  <div class="app-container">
    // 添加专业
    <el-dialog title="添加专业" :visible.sync="dialogFormVisible" ref="addForm">
      <el-form
        :model="addForm"
        :label-position="labelPosition"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="专业代码" prop="specCode">
          <el-input v-model="addForm.specCode"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="specName">
          <el-input v-model="addForm.specName"></el-input>
        </el-form-item>
        <el-form-item label="毕业层次" prop="educationLevel">
          <el-select v-model="addForm.educationLevel" placeholder="请选择">
            <el-option
              :label="item.itemName"
              :value="item.itemName"
              v-for="item in levelList"
              :key="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="addForm.node"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

    // 修改专业
    <el-dialog
      title="修改专业"
      :visible.sync="updialogFormVisible"
      ref="updateForm"
    >
      <el-form
        :model="updateForm"
        :label-position="labelPosition"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="专业代码" prop="specCode">
          <el-input v-model="updateForm.specCode"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="specName">
          <el-input v-model="updateForm.specName"></el-input>
        </el-form-item>
        <el-form-item label="毕业层次" prop="educationLevel">
          <el-select v-model="updateForm.educationLevel" placeholder="请选择">
            <el-option
              :label="item.itemName"
              :value="item.itemName"
              v-for="item in levelList"
              :key="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="updateForm.node"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uponsubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-row type="flex" justify="center">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="专业代码">
          <el-input
            v-model="formInline.specCode"
            placeholder="专业代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input
            v-model="formInline.specName"
            placeholder="专业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="层次">
          <el-select v-model="formInline.educationLevel" placeholder="全部">
            <el-option
              :label="item.itemName"
              :value="item.itemName"
              v-for="item in levelList"
              :key="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row type="flex" justify="end">
      <el-button type="warning" @click="search">查询</el-button>
      <el-button type="success" @click="newBulid">新建</el-button>
      <el-button type="warning" @click="daoru">导入</el-button>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="specCode" label="专业代码" align="center">
      </el-table-column>
      <el-table-column prop="specName" label="专业名称" align="center">
      </el-table-column>
      <el-table-column prop="educationLevel" label="层次" align="center">
      </el-table-column>
      <el-table-column prop="note" label="备注" align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="180"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="success" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getList,
  deleteData,
  addData,
  editData,
  getLevelList,
} from "@/api/SpecManage";
export default {
  data() {
    return {
      labelPosition: "right",
      formInline: {
        specCode: "",
        specName: "",
        educationLevel: "",
      },
      addForm: {},
      updateForm: {},
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 0,
      levelList: [],
      dialogFormVisible: false,
      updialogFormVisible: false,
      currentObj: {},
      rules: {
        specCode: [
          { required: true, message: "专业代码为必填项", trigger: "blur" },

          {
            min: 6,
            max: 6,
            message: "专业代码只能输入6位数字或英文",
            trigger: "blur",
          },

          { pattern: /^[a-zA-Z0-9]+$/, message: "只能输入6位数字或英文" },
        ],
        educationLevel: [
          { required: true, message: "请输入专业名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        educationLevel: [{ required: true, message: "请选择" }],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      addData(this.addForm).then((res) => {
        if (res === 1) {
          this.dialogFormVisible = false;
          this.$message.success("添加成功");
        }
      });
    },
    uponsubmit() {
      this.updialogFormVisible =false
      this.currentObj.specCode = this.updateForm.specCode;
      this.currentObj.specName = this.updateForm.specName;
      this.currentObj.educationLevel = this.updateForm.educationLevel;
      this.$message.success("编辑成功");
    },
    newBulid() {
      console.log("fdfdf");
      this.dialogFormVisible = true;
    },
    daoru() {},
    search() {
      getList({
        pageSize: 10,
        pageNo: 1,
        specName: this.formInline.specName,
        specCode: this.formInline.specCode,
        educationLevel: this.formInline.educationLevel,
      }).then((res) => {
        this.tableData = res.specPagination.resultList;
        this.total = res.specPagination.total;
      });
    },
    edit(value) {
      this.updialogFormVisible = true;
      this.currentObj = value;
    },
    del(value) {
      console.log(value);
      deleteData(value).then((res) => {
        if (res === 1) {
          this.$message.success("删除成功");
          this.tableData.forEach((e, index) => {
            if (e.specId === value.specId) {
              this.tableData.splice(index, 1);
            }
          });
        }
      });
    },
    currentChange(pageNo) {
      getList({
        pageSize: this.pageSize,
        pageNo: pageNo,
      }).then((res) => {
        console.log(res);
        this.tableData = res.specPagination.resultList;
        this.total = res.specPagination.total;
      });
    },
  },
  mounted() {
    getList({
      pageSize: this.pageSize,
      pageNo: 2,
    }).then((res) => {
      console.log(res);
      this.tableData = res.specPagination.resultList;
      this.total = res.specPagination.total;
    });
    getLevelList({
      schoolId: "",
    }).then((res) => {
      this.levelList = res.RET_OBJ;
    });
  },
};
</script>

<style>
</style>